<template>
  <Camera
    ref="camera"
    :resolution="resolution"
    facingMode="user"
    :autoplay="false"
    :playsinline="false"
    @loading="onLoading"
    @started="onStarted"
    @stopped="onStopped"
    @paused="onPaused"
    @resumed="onResumed"
    @camera-change="onCameraChanged"
    @snapshot="onSnapshot"
    @error="onError"
  >
    <template #default>
      <div>
        <div>
          <button @click="camera.snapshot()">Snapshot</button>
        </div>
        <div>
          <button @click="camera.start()">Start</button>
        </div>
        <div>
          <button @click="camera.stop()">Stop</button>
        </div>
        <div>
          <button @click="camera.pause()">Pause</button>
        </div>
        <div>
          <button @click="camera.resume()">Resume</button>
        </div>
      </div>
    </template>
  </Camera>
</template>
<script setup>
import Camera from 'simple-vue-camera'
import { ref } from 'vue'

/**
 * @link(https://github.com/BastiaanJansen/simple-vue-camera#basics)
 */
const camera = ref(null)

const resolution = ref({ width: 812, height: 375 })

const onLoading = () => console.log('camera is loading')
const onStarted = () => console.log('camera is started')
const onStopped = () => console.log('camera is stopped')
const onPaused = () => console.log('camera is paused')
const onResumed = () => console.log('camera is resumed')
const onCameraChanged = () => console.log('camera is changed')
const onSnapshot = () => console.log('camera is snapshot')
const onError = () => console.log('camera is error')
</script>
